<template>
    <vxe-table
        :loading="loading"
        ref="xTable"
        highlight-hover-row
        style="width: 100%"
        class="text-center"
        show-footer
        :footer-method="footerMethod"
        :max-height="maxHeight">
        <vxe-table-column title="日期" field="day" min-width="120" fixed="left"/>
        <vxe-table-column title="注册人数" field="registerUser" formatter="formatHuman" min-width="80"/>
        <vxe-table-column title="注册成本" field="registerCost" :formatter="['formatHumanRmb', 2]" min-width="80"/>
        <vxe-table-column title="活跃人数" field="loginUser" formatter="formatHuman" min-width="80"/>
        <vxe-table-column title="去新增活跃" field="loginOldUser" formatter="formatHuman" min-width="80"/>
        <vxe-table-column title="付费成本" field="payCost" formatter="formatHumanRmb" min-width="80"/>
        <vxe-table-column title="充值率" field="payUserScale" formatter="formatPercent" :title-help="{message: '充值人数 / 活跃人数'}" min-width="90"/>
        <vxe-table-column title="推广费" field="spreadCost" formatter="formatHumanRmb" min-width="110"/>
        <vxe-table-column title="充值金额" field="pay" formatter="formatHumanRmb" min-width="90"/>
        <vxe-table-column title="兑换积分" field="thirdExchange" :formatter="['formatW', 1]" min-width="90"/>
        <vxe-table-column title="积分占比" field="thirdExchangePayScale" formatter="formatPercent" min-width="140"/>

        <vxe-table-column title="充值人数" field="payUser" formatter="formatHuman" min-width="80"/>
        <vxe-table-column title="积分人数" field="thirdExchangeUser" formatter="formatHuman" min-width="80"/>
        <vxe-table-column title="积分率" field="thirdExchangeUserScale" formatter="formatPercent" :title-help="{message: '积分人数 / 活跃人数'}" min-width="80"/>
<!--            <vxe-table-column title="平台情况" field="platformProfit" formatter="formatHumanRmb" :title-help="{message: '充值'}" min-width="100"/>-->
        <vxe-table-column title="充值-推广费" field="pay-spreadCost" formatter="formatHumanRmb" min-width="140">
            <template #default="{row}">{{ $helper.formatHumanRmb(row.pay-row.spreadCost) }}</template>
        </vxe-table-column>
<!--            <vxe-table-column title="净利润(元)" field="normalProfit" formatter="formatHumanRmb" :title-help="{message: '充值 - 推广费'}" min-width="100"/>-->
        <vxe-table-column title="市场ROI" field="roiMarket" :formatter="['formatPercent', 2]" min-width="80"/>
        <vxe-table-column title="实际ROI" field="roi" :formatter="['formatPercent', 2]" min-width="80"/>
    </vxe-table>
</template>

<script>
export default {
    props: {
        search: {
            source: '',
            day: [],
        }
    },
    data() {
        return {
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 50,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            options: this.$store.state.operation.options.bulletLog,
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 270;
        },
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('spreadData/SourceLtv', filter).then(({data}) => {
                this.$refs.xTable.reloadData(data)
                // this.totalDataNumber = data.meta.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.handleSearch();
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '推广数据-' + this.$route.meta.title,
                type: 'xlsx'
            })
        },
        footerMethod({columns, data}) {
            return this.$helper.vxeFooter(columns, data, (index, property) => {
                return index < 1;
            }, (sums, allFields) => {
                // 计算 payUserScale
                sums[allFields.payUserScale] = this.$helper.calcDivision(sums[allFields.payUser], sums[allFields.loginUser]);
                // 计算 thirdExchangeUserScale
                sums[allFields.thirdExchangeUserScale] = this.$helper.calcDivision(sums[allFields.thirdExchangeUser], sums[allFields.loginUser]);
                // 计算 registerCost
                sums[allFields.registerCost] = this.$helper.calcDivision(sums[allFields.spreadCost], sums[allFields.registerUser]);
                // 计算 payCost
                sums[allFields.payCost] = this.$helper.calcDivision(sums[allFields.spreadCost], sums[allFields.payUser]);
                // 计算 实际roi
                sums[allFields.roi] = this.$helper.calcDivision(sums[allFields.pay] - sums[allFields.thirdExchange] / this.$CURRENCY_HB_SCALE * 100, sums[allFields.spreadCost]);
                // 计算 市场roi
                sums[allFields.roiMarket] = this.$helper.calcDivision(sums[allFields.pay], sums[allFields.spreadCost]);
                sums[allFields.thirdExchangePayScale] = this.$helper.calcDivision(sums[allFields.thirdExchange]/this.$CURRENCY_HB_SCALE*100, sums[allFields.pay])
                sums[allFields['pay-spreadCost']] =  sums[allFields.pay] - sums[allFields.spreadCost];
                return sums;
            });
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>

</style>

